<template>
  <div class="wrapper">
    <div class="map-container" ref="myEchart" style="width:1200px;height:700px"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主体
import resize from '../components/mixins/resize'
import "../../../../node_modules/echarts/map/js/china.js";
export default {
  mixins: [resize],
  data() {
    return {
      myEchart: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.myEchart = echarts.init(this.$refs.myEchart)
      var dataValue = this.dealWithData();
      var option = {
        tooltip: {
          trigger: 'item',
          formatter(value) {
            return value.name + "<br/>" + "设备数：" + value.value;
          }
        },
        series: [
          {
            type: "map",
            map: "china",
            roam: false,
            zoom: 1.23,
            center: [105, 36],
            geoIndex: 1,
            aspectScale: 0.75, //长宽比
            // regions: [
            //   {
            //     name: "南海诸岛",
            //     itemStyle: {
            //       // 隐藏地图
            //       normal: {
            //         opacity: 0, // 为 0 时不绘制该图形
            //       }
            //     },
            //     label: {
            //       show: false // 隐藏文字
            //     }
            //   }
            // ],
            itemStyle: {
              normal: {
                areaColor: "#000",
                borderColor: "#389dff",
                borderWidth: 0.5,
                shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
                shadowOffsetX: 2, // 阴影偏移
                shadowOffsetY: 8, // 阴影偏移
                shadowBlur: 1 // 边框阴影
              },
              emphasis: {
                areaColor: "#17008d",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            data: dataValue,
            label: {
              normal: {
                show: true
              },
            },
            emphasis: {
              label: {//文字颜色，样式在此处
                color: '#ffffff',
                fontSize: '15'
              }
            },
          }
        ]
      };
      this.myEchart.setOption(option);
    },
    dealWithData() {
      let data = [
        { name: "北京", value: Math.round(Math.random() * 1000) },
        { name: "天津", value: Math.round(Math.random() * 1000) },
        { name: "上海", value: Math.round(Math.random() * 1000) },
        { name: "重庆", value: Math.round(Math.random() * 1000) },
        { name: "河北", value: Math.round(Math.random() * 1000) },
        { name: "河南", value: Math.round(Math.random() * 1000) },
        { name: "云南", value: Math.round(Math.random() * 1000) },
        { name: "辽宁", value: Math.round(Math.random() * 1000) },
        { name: "黑龙江", value: Math.round(Math.random() * 1000) },
        { name: "湖南", value: Math.round(Math.random() * 1000) },
        { name: "安徽", value: Math.round(Math.random() * 1000) },
        { name: "山东", value: Math.round(Math.random() * 1000) },
        { name: "新疆", value: Math.round(Math.random() * 1000) },
        { name: "江苏", value: Math.round(Math.random() * 1000) },
        { name: "浙江", value: Math.round(Math.random() * 1000) },
        { name: "江西", value: Math.round(Math.random() * 1000) },
        { name: "湖北", value: Math.round(Math.random() * 1000) },
        { name: "广西", value: Math.round(Math.random() * 1000) },
        { name: "甘肃", value: Math.round(Math.random() * 1000) },
        { name: "山西", value: Math.round(Math.random() * 1000) },
        { name: "内蒙古", value: Math.round(Math.random() * 1000) },
        { name: "陕西", value: Math.round(Math.random() * 1000) },
        { name: "吉林", value: Math.round(Math.random() * 1000) },
        { name: "福建", value: Math.round(Math.random() * 1000) },
        { name: "贵州", value: Math.round(Math.random() * 1000) },
        { name: "广东", value: 500 },
        { name: "青海", value: Math.round(Math.random() * 1000) },
        { name: "西藏", value: Math.round(Math.random() * 1000) },
        { name: "四川", value: Math.round(Math.random() * 1000) },
        { name: "宁夏", value: Math.round(Math.random() * 1000) },
        { name: "海南", value: Math.round(Math.random() * 1000) },
        { name: "台湾", value: Math.round(Math.random() * 1000) },
        { name: "香港", value: Math.round(Math.random() * 1000) },
        { name: "澳门", value: Math.round(Math.random() * 1000) },
        { name: "南海诸岛", value: 0, itemStyle: { normal: { opacity: 0 } }, label: { show: false } }
      ]
      return data;
    }
  }
}
</script>